<script setup lang="ts">
defineProps<{
    icon?: string,
    title?: string,
    description?: string,
}>();
</script>

<template>
    <div
        class="p-2 w-80 aspect-video bg-white shadow-md rounded-lg hover:shadow-normal transition duration-200 grid grid-cols-4 grid-rows-3">
        <svg class="icon place-self-center" :style="{ width: '2rem', height: '2rem' }" aria-hidden="true">
            <use :xlink:href="`#${icon || 'icon-robot-2-line'}`" />
        </svg>
        <div class="col-span-3 self-center text-2xl font-bold">{{ title || 'title' }}</div>
        <div class="px-3 col-span-4 row-span-2 text-lg text-slate-500 overflow-hidden break-all">
            {{ description || 'descriptiondescriptiondescriptiondescription' }}
        </div>
    </div>
</template>